<template>
  <!-- 供应商详情 路由页 -->
  <!-- {{ tableForm }} -->
  <div class="table-default" v-if="tableForm" v-loading="selfLoading">
    <!-- 送货单id--{{ route.query.id }} -->

    <el-button class="backBtn" type="primary" @click="goback">返回</el-button>
    <el-button class="backBtn" type="success" @click="barcodeShow = true" v-if="tableForm.state == 1">打印单号</el-button>
    <el-button class="backBtn" type="warning" @click="approveHandler(tableForm.id)" v-if="tableForm.state == 0" v-loading.fullscreen.lock="fullscreenLoading">审核</el-button>
    <el-button class="backBtn" type="warning" @click="editSubmit" style="margin-left: 20px" v-if="tableForm.state == 0">提交修改</el-button>
    <el-button class="backBtn" type="warning" @click="editActualHandler" style="margin-left: 20px" v-if="tableForm.state == 1 && tableForm.temporary == '未暂收'">修改实际到货箱数</el-button>

    <div id="base" ref="base" v-if="tableForm.supplierOrder">
      <el-descriptions :column="3" border title="基本信息">
        <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="供应商送货单号">{{ tableForm.supplierOrder }}</el-descriptions-item>
        <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="备注">{{ remarkForm.remarks }}</el-descriptions-item>
        <el-descriptions-item label-class-name="labelClassNAme" class-name="contentClassName" label="单据状态">{{ fdocumentstatus[tableForm.state] }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <el-form :model="remarkForm" label-width="60px" v-if="tableForm.state == 0">
      <el-form-item label="备注 : " prop="remarks">
        <el-input v-model="remarkForm.remarks" name="remarks" clearable />
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" class="demo-tabs" v-if="tableForm.detailscheck_all">
      <el-tab-pane label="供货商送货明细" name="purchase">
        <el-form :model="tableForm" label-width="100px" :rules="rules" ref="ruleFormRef">
          <el-table :data="tableForm.detailscheck_all" border v-loading="selfLoading" show-summary>
            <el-table-column prop="fbillno" label="采购订单" width="250" fixed="left" />
            <el-table-column prop="fmaterialid" label="品号" min-width="150" />
            <el-table-column prop="fmaterialname" label="品名" min-width="300" />
            <el-table-column prop="fmodel" label="型号" min-width="150" />
            <el-table-column prop="fmaterialmodel" label="规格" min-width="150" />
            <el-table-column prop="funitid_name" label="单位" min-width="60" />
            <el-table-column prop="fqty" label="数量" width="80">
              <template #default="scope">
                {{ Number(scope.row.fqty) }}
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="送货数量" width="210" v-if="tableForm.state == 0">
              <template #default="scope">
                <el-form-item :prop="'detailscheck_all.' + scope.$index + '.quantity'" :rules="rules.quantity">
                  <span class="required">*</span>
                  <el-input-number v-model="scope.row.quantity" :min="0" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="送货数量" width="100" v-if="tableForm.state == 1">
              <template #default="scope"> {{ Number(scope.row.quantity) }} </template>
            </el-table-column>

            <el-table-column prop="number" label="箱数" min-width="190" v-if="tableForm.state == 0">
              <template #default="scope">
                <el-form-item :prop="'detailscheck_all.' + scope.$index + '.number'" :rules="rules.number">
                  <span class="required">*</span>
                  <el-input-number v-model="scope.row.number" :min="0" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="number" label="箱数" min-width="80" v-if="tableForm.state == 1">
              <template #default="scope">
                {{ scope.row.number }}
              </template>
            </el-table-column>

            <!-- 审核后还分暂收和未暂收 -->

            <el-table-column prop="actual_number" label="实际到货箱数" min-width="100" v-if="tableForm.state == 1 && tableForm.temporary == '已暂收'">
              <template #default="scope">
                {{ scope.row.actual_number }}
              </template>
            </el-table-column>

            <!-- 已审核，未暂收，也是用输入框，可以修改 -->
            <el-table-column prop="actual_number" label="实际到货箱数" min-width="190" v-if="tableForm.state == 1 && tableForm.temporary == '未暂收'">
              <template #default="scope">
                <el-form-item :prop="'detailscheck_all.' + scope.$index + '.actual_number'" :rules="rules.actual_number">
                  <span class="required">*</span>
                  <el-input-number v-model="scope.row.actual_number" :min="0" />
                </el-form-item>
              </template>
            </el-table-column>

            <!-- 未暂收 -->
            <el-table-column prop="actual_number" label="实际到货箱数" min-width="190" v-if="tableForm.state == 0">
              <template #default="scope">
                <el-form-item :prop="'detailscheck_all.' + scope.$index + '.actual_number'" :rules="rules.actual_number">
                  <span class="required">*</span>
                  <el-input-number v-model="scope.row.actual_number" :min="0" />
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="deliverydate" label="交货日期" width="280" v-if="tableForm.state == 0">
              <template #default="scope">
                <el-form-item :prop="'detailscheck_all.' + scope.$index + '.deliverydate'" :rules="rules.deliverydate">
                  <span class="required">*</span>
                  <el-date-picker v-model="scope.row.deliverydate" type="date" placeholder="选择送货日期" :size="size" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="deliverydate" label="交货日期" width="200" v-if="tableForm.state == 1">
              <template #default="scope">
                {{ scope.row.deliverydate }}
              </template>
            </el-table-column>
            <el-table-column prop="fsupplierid_number" label="供应商送编码" min-width="200" />
            <el-table-column prop="fsupplierid_name" label="供应商名称" min-width="200" />
            <el-table-column prop="fprovidercontactid" label="联系人" min-width="200" />
            <el-table-column prop="fproviderphone" label="联系电话" min-width="200" />
          </el-table>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <el-dialog v-model="barcodeShow" title="选择打印单号" width="90%" style="height: 80%">
      <barcodeVue :supplierId="supplierId" @send-close="barcodeShow = false" :curtemporary="tableForm.temporary"></barcodeVue>

      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="barcodeShow = false">关闭</el-button>
        </span>
      </template> -->
    </el-dialog>
  </div>
</template>
    
    <script lang="ts" setup>
import { computed, onMounted, toRaw, ref, reactive, nextTick, watch, defineEmits } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import { ArrowDownBold } from '@element-plus/icons-vue'
import print from './print.vue'
import codeBarList from './codeBarList.vue'
import http from '/admin/support/http'
import detailUpdate from './detailUpdate.vue'
import barcodeVue from './barcodeVue.vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import storage from '/admin/utils/storage'
import { delDetailRouter } from '/admin/utils/delDetailRouter'
import emitter from '/admin/utils/emitter'
const route = useRoute()
const router = useRouter()
console.log('===当前route===', route)
const dialogVisible = ref(false)
const props = defineProps({
  isDetail: Boolean,
})
const supplierId = ref(route.query.id)

const createTitle = '供货商送货单-修改'

console.log('接受父传值', props)

let api = `purchasing/supplier/${route.query.id}`

const categoryApi = `purchasing/categoryApi`

const updateVisible = ref(false)

// const { data, query, search, reset, loading, toraw } = useGetList(api)
// const { destroy, deleted } = useDestroy()
// const { open, close, title, visible, id } = useOpen()

// const tableData = computed(() => data.value?.data)

// console.log('请求详情数据：', tableData)

let detailObj = reactive({})

let selfLoading = ref(true)
let curtemporary = ref(null)

// 剥离修改
const remarkForm = reactive({
  remarks: '',
})

let tableForm = reactive({
  detailscheck_all: [],
})

const getList = () => {
  http.get(`purchasing/supplier/${route.query.id}`).then(r => {
    // selfLoading.value = true
    console.log('自己请求的详情数组：', r.data)
    if (r.data.code == '10000') {
      // setTimeout(()=>{
      tableForm = r.data.data
      selfLoading.value = false
      // },500)
      console.log('表格数据', tableForm)
    }
  })
}

const rules = reactive({
  quantity: [{ required: true, trigger: 'blur', message: '不能为空' }],
  number: [{ required: true, message: '不能为空', trigger: 'blur' }],
  actual_number: [{ required: true, message: '不能为空', trigger: 'blur' }],
  deliverydate: [{ required: true, message: '不能为空', trigger: 'change' }],
})

const printShow = ref(false)
const barcodeShow = ref(false)

const rowData = ref({})
const updateHandler = data => {
  updateVisible.value = true
  rowData.value = data
  console.log(rowData.value)
}

let refreshPage = () => {
  router.push(`/purchasing/supplierDetail?id=${route.query.id}`)
}

const activeName = ref('purchase')

const fdocumentstatus = ref({
  0: '未审核',
  1: '审核',
})

// 修改实际到货箱数
const editActualHandler = () => {
  console.log(tableForm.detailscheck_all)
  let sendData = tableForm.detailscheck_all.map(ele => {
    return {
      id: ele.id,
      actual_number: ele.actual_number,
    }
  })
  console.log('修改实际箱数数据：', sendData)
  http.put(`/purchasing/modifydata/`, sendData).then(r => {
    console.log('修改实际箱数提交返回数据：', r.data)
    if (r.data.code == '10000') {
      ElMessage.success(r.data.message)
    }
    selfLoading.value = false
  })
}

// 提交修改
let editSubmit = () => {
  return new Promise((resolve, reject) => {
    selfLoading.value = true
    let data = {
      id: route.query.id,
      remarks: remarkForm.remarks,
      detailscheck_all: [],
    }
    console.log(tableForm.detailscheck_all)

    for (let i = 0; i < tableForm.detailscheck_all.length; i++) {
      let obj = {}
      obj.purchaseorder_id = tableForm.detailscheck_all[i].purchaseorder_id
      obj.purchaseorderschedule_id = tableForm.detailscheck_all[i].purchaseorderschedule_id
      obj.quantity = tableForm.detailscheck_all[i].quantity
      obj.deliverydate = tableForm.detailscheck_all[i].deliverydate
      obj.thequantity = tableForm.detailscheck_all[i].thequantity
      obj.number = tableForm.detailscheck_all[i].number
      obj.actual_number = tableForm.detailscheck_all[i].actual_number
      data.detailscheck_all[i] = obj
    }
    console.log('修改提交的数据：', data)

    http.put(`purchasing/supplier/${route.query.id}`, data).then(r => {
      console.log('修改提交返回数据：', r.data)
      if (r.data.code == '10000') {
        // tableForm = r.data.data
        // console.log('表格数据', tableForm)
        ElMessage.success(r.data.message)
        resolve()
      } else {
        reject()
      }
      selfLoading.value = false
    })
  })
}

const fullscreenLoading = ref(false)

// 审批
const approveHandler = id => {
  fullscreenLoading.value = true

  editSubmit()
    .then(() => {
      fullscreenLoading.value = true
      http.put(`/purchasing/auditupdate/${id}`).then(r => {
        // console.log(r.data.code);
        ElMessage({
          message: r.data.message,
          type: 'success',
        })
        // 审核成功，需要刷新首页
        emitter.emit('changeSupplierStatus', { status: true })
        fullscreenLoading.value = false
        tableForm.state = 1
      })
    })
    .catch(error => {
      ElMessage({
        message: '审核请求失败',
        type: 'danfer',
      })
      fullscreenLoading.value = false
    })
}

// 返回，切换组件
const goback = () => {
  delDetailRouter('送货单详情', '/purchasing/supplier')
}

onMounted(() => {
  getList()
  // search()
  // deleted(reset)
})
</script>
  
  <style lang="css" >
.el-overlay-dialog {
  top: -80px;
}
.el-dialog__body {
  /* border: 1px solid #000; */
  height: 90%;
  padding: 0 10px !important;
}
.el-input__wrapper {
  flex-grow: 0;
}
.formItem {
  display: flex;
}
.backBtn {
  margin: 10px 10px 0;
}
.labelClassNAme {
  width: 100px;
}
.contentClassName {
  width: 170px;
}
.updateBtn {
  margin-right: 20px;
}
#base {
  padding: 20px 10px;
}
.el-form-item__content {
  margin-left: 0 !important;
}
</style>
     